<template>
  <view class="case-form">
    <view class="pb-200rpx">
      <u-form :model="formData" ref="uForm" :rules="rules">
        <!-- 标题 -->
        <u-form-item label="标题" prop="Title" label-width="160rpx">
          <u-input
            v-model="formData.Title"
            placeholder="请输入标题"
            clearable
          />
        </u-form-item>

        <!-- 类型 -->
        <u-form-item label="案例类型" prop="CategoryName" label-width="160rpx">
          <picker
            :show="showCategory"
            :range="categoryOptions"
            range-key="label"
            header-text="请选择分类"
            @change="handleSelectCategory"
          >
            <u-input
              v-model="formData.CategoryName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择分类"
            ></u-input>
          </picker>
        </u-form-item>

        <!-- 案例经过 -->
        <u-form-item
          label="案例经过"
          prop="Description"
          label-width="160rpx"
          label-position="top"
        >
          <view class="mt-10px">
            <u-textarea
              v-model="formData.Description"
              placeholder="请详细描述案例经过"
              height="200"
              count
              maxlength="500"
            />
          </view>
        </u-form-item>

        <!-- 受骗原因 -->
        <u-form-item
          label="受骗原因"
          prop="DeceivedReason"
          label-width="160rpx"
          label-position="top"
        >
          <view class="mt-10px">
            <u-textarea
              v-model="formData.DeceivedReason"
              placeholder="每行输入一个原因，使用英文逗号分割"
              height="130"
              count
              maxlength="500"
            />
          </view>
        </u-form-item>

        <!-- 防范建议 -->
        <u-form-item
          label="防范建议"
          prop="PreventiveSuggestions"
          label-width="160rpx"
          label-position="top"
        >
          <view class="mt-10px">
            <u-textarea
              v-model="formData.PreventiveSuggestions"
              placeholder="每行输入一个建议，使用英文逗号分割"
              height="130"
              count
              maxlength="500"
            />
          </view>
        </u-form-item>
      </u-form>
    </view>
    <!-- 提交按钮 -->
    <view class="bottom-box">
      <u-button
        type="primary"
        @click="submitForm"
        :loading="submitting"
        custom-style="margin-top: 40rpx"
      >
        提交案例
      </u-button>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { postCaseApi } from '../case/service'
import { userStore } from '@/store/modules/user'

@Component
export default class CaseSubmitForm extends Vue {
  uForm: any = null
  get userInfo(): any {
    return userStore.userInfo ?? {}
  }
  showCategory = false
  formData: any = {
    Title: '',
    Description: '',
    Category: '',
    CategoryName: '',
    AuthorID: this.userInfo.OfficerID,
    DeceivedReason: '',
    PreventiveSuggestions: ''
  }
  categoryOptions = [
    { value: 1, label: '人脸识别' },
    { value: 2, label: '安全认证' },
    { value: 3, label: '数据加密' },
    { value: 4, label: '网络防护' }
  ]

  minDate = 0
  maxDate = Date.now()

  rules: any = {
    Title: [
      { required: true, message: '请输入案例标题', trigger: 'blur' },
      { min: 5, message: '标题不能少于5个字', trigger: 'blur' }
    ],
    CategoryName: [
      { required: true, message: '请选择案例类型', trigger: 'change' }
    ],
    Description: [
      { required: true, message: '请输入案例描述', trigger: 'blur' },
      { min: 20, message: '描述不能少于20字', trigger: 'blur' }
    ],
    DeceivedReason: [
      { required: true, message: '请输入受骗原因', trigger: 'blur' }
    ],
    PreventiveSuggestions: [
      { required: true, message: '请输入防范建议', trigger: 'blur' }
    ]
  }

  submitting = false

  handleSelectCategory({ detail: { value } }: any) {
    this.formData.Category = this.categoryOptions[value].value
    this.formData.CategoryName = this.categoryOptions[value].label
    this.showCategory = false
  }

  async submitForm() {
    try {
      await (this.$refs.uForm as any).validate()

      const submitData = {
        ...this.formData
      }

      this.submitting = true

      await postCaseApi(submitData)

      uni.showToast({ title: '提交成功' })
      setTimeout(() => uni.navigateBack(), 1500)
    } catch (error) {
      console.error('表单验证失败:', error)
    } finally {
      this.submitting = false
    }
  }
}
</script>

<style lang="scss" scoped>
.case-form {
  padding: 30rpx;
  background-color: white;
}

.u-form-item {
  margin-bottom: 30rpx;
}

.u-textarea {
  border: 1rpx solid #e4e7ed;
  border-radius: 8rpx;
  padding: 20rpx !important;
}
</style>
